<script lang="ts" setup>
import type { TrainAgentInfo } from "@/common/apis/intelligent/type"
import { trainedPublishApi } from "@/common/apis/intelligent"
import { FormTypeEnum } from "@/common/constants/other-keys"
import { CodeEditor, GenerateAgent, VersionManageVue, Wiki } from "./components"
import { onActivated } from "vue"
import { useRoute } from "vue-router"
const route = useRoute()
defineOptions({
  name: "IntelligentCreate"
})
const isCreated = ref<boolean>(false)
const agentId = ref<string>()
const agentName = ref<string>()
const activeTab = ref<number>(1)
const multipleSelection = ref<TrainAgentInfo[]>([])
const componentRef = ref()
// 常量和类型定义
const STEP_TITLES = ["代码", "Wiki", "管理"] as const
const SVG_NAMES = ["agent-code", "agent-wiki", "agent-manage"] as const
type StepTitle = typeof STEP_TITLES[number]
type StepSvg = typeof SVG_NAMES[number]
const STEP_COMPONENTS: Record<number, Component> = {
  1: CodeEditor,
  2: Wiki,
  3: VersionManageVue
}
interface Step {
  title: StepTitle
  id: number
  svg: StepSvg
  component: Component
}
// 计算属性
const steps = computed<Step[]>(() =>
  STEP_TITLES.map((title, index) => ({
    title,
    id: index + 1,
    svg: SVG_NAMES[index],
    component: STEP_COMPONENTS[index + 1]
  }))
)

function handleGenerated(params: {
  agentId: string
  agentName: string
}) {
  // 根据agentId查询信息
  isCreated.value = true
  agentId.value = params.agentId
  agentName.value = params.agentName
}

function handlePublish() {
  const ids: string[] = []
  multipleSelection.value.forEach((item) => {
    ids.push(item.trained_agent_id as string)
  })
  const params = {
    agent_id: agentId.value,
    ids
  }
  trainedPublishApi(params).then(() => {
    ElMessage.success("发布成功")
    componentRef.value[2].handleClearSelection()
  })
}
const type = ref('agent')
onActivated(() => {
  if(route.name === 'MyProjectIntelligentCreate'){
    isCreated.value = false
  }
})
</script>

<template>
  <div class="app-container pager-container">
    <template v-if="isCreated">
      <div class="cpi-header">
        <span class="cpi-header-text">{{ agentName }}</span>
        <div v-if="activeTab == 3">
          <el-button :disabled="multipleSelection.length < 1" type="success" @click="handlePublish">
            发布
          </el-button>
        </div>
      </div>
      <div class="cpi-content">
        <el-tabs v-model="activeTab" class="agent-tabs">
          <el-tab-pane
            v-for="step in steps"
            :key="step.id"
            :name="step.id"
          >
            <template #label>
              <span class="custom-tabs-label">
                <SvgIcon :name="step.svg" />
                <span>{{ step.title }}</span>
              </span>
            </template>
            <component ref="componentRef" :is="step.component" :dialog-type="FormTypeEnum.CREATE" :type="type" :id="agentId" :agent_id="agentId" v-model:publish-agents="multipleSelection" v-model:agent-name="agentName" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <template v-else>
      <GenerateAgent @handle-generated="handleGenerated" />
    </template>
  </div>
</template>

<style lang="scss" scoped>
.pager-container {
  padding-bottom: 20px !important;
}
.cpi-content {
  flex: 1;
  overflow: hidden;
}
.agent-tabs,
.el-tab-pane {
  height: 100%;
  width: 100%;
}
:deep(.agent-tabs .el-tabs__nav-scroll) {
  .el-tabs__item {
    padding: 0 20px !important;

    &:hover {
      color: #02ebc3 !important;
    }

    &.is-active {
      color: #02ebc3 !important;
    }

    & > span {
      padding: 0 13px !important;
    }
  }

  .el-tabs__active-bar {
    background-color: #02ebc3 !important;
  }
}
.custom-tabs-label {
  display: flex;
  gap: 10px;
}
</style>
